<template>
	<view>
		<!-- <nav-bar :bgColor="['#3350D9','#1152FC']" backState="2000" fontColor="#FFF"  title="智慧社区">
		</nav-bar> -->
		<home-nav :label="label" @show="showPicker" ref="homeNav"></home-nav>
		<van-popup safe-area-inset-top safe-area-inset-bottom :show="isShow" position="bottom"
			custom-style="height: 40%;" @close="onClose">
			<van-picker :visible-item-count="4" @cancel="onCancel" show-toolbar :columns="unitList.map(x=>x.单位名称)"
				@confirm="onConfirm" />
		</van-popup>
		<!-- <nav-bar home :bgColor="['#3350D9','#1152FC']" fontColor="#FFF" title="智慧社区"></nav-bar> -->
		<view class="index-top">
			<image src="../../static/new/index.png" mode=""></image>
			<text class="top-text">待处理事项(单）</text>
			<view class="index-box">
				<view @click="goTicket" class="index-num-item">
					<view class="index-num">{{ticketLength}}</view>
					<text>待完成工单</text>
				</view>

				<!-- <view class="index-num-item">
					<view class="index-num">165</view>
					<text>待完成工单</text>
				</view> -->
				<view @click="goTask" class="index-num-item">
					<view class="index-num">{{taskLength}}</view>
					<text>待完成任务</text>
				</view>
				<view class="index-num-item">
					<view class="index-num">0</view>
					<text>待完成巡查</text>
				</view>
			</view>
		</view>
		<view class="nav">
			<view class="nav-item" v-for="(item,index) in orderNavList" :key="index" @click="navItemClick(item.path)">
				<view class="item-img">
					<image :src="item.src"></image>
				</view>
				<text class="item-text">{{item.title}}</text>
			</view>
		</view>
		<view class="notice">
			<text class="title">社区公告栏</text>
			<text class="more" @click="goCommunityNews">更多...</text>
		</view>
		<view class="notice-item">
			<view class="item-content">防风通知：因受台风“烟花”影响，未来两天大雨至大暴雨，请各位业主做好防风防雨准备...
				<text class="item-more">更多>></text>
			</view>
			<view class="time">2021-7-25 8:30</view>
		</view>
		<view class="notice-item">
			<view class="item-content">防风通知：因受台风“烟花”影响，未来两天大雨至大暴雨，请各位业主做好防风防雨准备...
				<text class="item-more">更多>></text>
			</view>
			<view class="time">2020-7-24 8:30</view>
		</view>
	</view>
</template>
<script>
	import HomeNav from '@/myComponents/homeNav'
	import navBar from "@/components/zhouWei-navBar";
	import {
		mapMutations
	} from 'vuex'
	export default {
		components: {
			navBar,
			HomeNav
		},
		data() {
			return {
				label: '',
				unitList: [],
				isShow: false,
				ticketLength: 0,
				taskLength: 0,
				ticketStatus: ['pending', 'handling', 'timeout'],
				taskStatus: [1, 2, 3],
				orderNavList: [{
						src: '../../static/new/8.png',
						title: '新建工单',
						path: '/ticketSystem/createOrder/createOrder'
					},
					{
						src: '../../static/new/9.png',
						title: '新建任务',
						path: '/taskSystem/createTask/createTask'
					},
					{
						src: '../../static/new/10.png',
						title: '品质巡查',
						path: '/taskSystem/list/list?type=4'
					},
					{
						src: '../../static/new/11.png',
						title: '设备巡检',
						path: '/taskSystem/list/list?type=3'
					}, {
						src: '../../static/new/12.png',
						title: '物料申领',
						path: '/materialSystem/materialApply/materialApply'
					}, {
						src: '../../static/new/27.png',
						title: '入户登记',
						path: '/roomSystem/checkRoomList/checkRoomList'
					}, {
						src: '../../static/new/16.png',
						title: '工单统计',
						path: '/ticketSystem/statistic/statistic'
					}, {
						src: '../../static/new/17.png',
						title: '装修审批',
						path: '/renovationSystem/approveList/approveList'
					}
				],
				params: {
					接单人id: null,
					工单状态列表: ['pending', 'handling', 'timeout'],
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				},

				params1: {
					执行人id: null,
					pagination: {
						current: 1,
						pageSize: 10
					},
					sorter: {
						field: "id",
						order: 0
					}
				}
			}
		},
		onLoad() {
			
			if (!uni.getStorageSync('login')) {
				this.showModal()
			}
			
		},
		onShow() {
			if (uni.getStorageSync('login') && !uni.getStorageSync('userInfo')) {
				this.initData()
			}
			if (uni.getStorageSync('userInfo')) {
				this.getTicketStatic()
				this.getTaskStatic()
			}
		},
		methods: {
			...mapMutations(['setPersonType']),
			onClose() {
				uni.showTabBar()
				this.isShow = false
			},
			onConfirm(event) {
				console.log(event.detail)
				this.isShow = false
				var value = event.detail.value
				var index = event.detail.index
				if (this.label == this.unitList[index].单位名称) {
					return
				}
				uni.showModal({
					title: '提示',
					content: '您确定要切换到' + value + '吗?',
					success: async (res) => {
						if (res.confirm) {

							this.label = this.unitList[index].单位名称
							const ids = uni.getStorageSync('userInfo').单位[index].工单员.负责项目
							const projectList = await this.getProjectList(ids)
							uni.setStorageSync('projectList', projectList)
							uni.setStorageSync('currentUnitId', this.unitList[index].单位id)
							uni.setStorageSync('label', this.label)
							uni.showToast({
								title: "切换成功"
							})
							uni.showTabBar()
							this.setPersonType(uni.getStorageSync('userInfo').单位[index].工单员.人员类型)
							
						} else if (res.cancel) {
							console.log('用户点击取消'); 
						}
					}
				});
			},
			showPicker() {
				this.isShow = true
			},
			onCancel() {
				this.isShow = false
				uni.showTabBar()
			},
			goTicket() {
				if (!uni.getStorageSync('userInfo')) {
					this.showModal()
				} else {
					uni.navigateTo({
						url: '/ticketSystem/index/index'
					})
				}
			},
			goTask() {
				if (!uni.getStorageSync('userInfo')) {
					this.showModal()
				} else {
					uni.navigateTo({
						url: '/taskSystem/list/list'
					})
				}
			},
			async initData() {
				// return
				const userInfo = await this.getUserInfo()
				uni.setStorageSync('userInfo', userInfo)
				this.setPersonType(userInfo.orgList[0].isManager)
				let projectList = await this.getProjectList(userInfo.projectIds)
				// if (!userInfo.单位[0].工单员.负责项目.length) {
				// 	projectList = []
				// }
				uni.setStorageSync('projectList', projectList)
				if (userInfo['网格员']) {
					let gridInfo = {
						...userInfo.网格员,
						联系电话: userInfo.手机号,
						身份证号: userInfo.身份证
					}
					uni.setStorageSync('gridInfo', gridInfo)
				}
				this.getTicketStatic()
				this.getTaskStatic()
			},
			getUserInfo() {
				return new Promise((resolve, reject) => {
					this.$http2.post('/sys/user/info', {
						id: 0
					}).then(res => {
						if (res.code === 10000) {
							resolve(res.data)
						}
					})
				})
			},
			getTicketStatic() {
				this.params.接单人id = uni.getStorageSync('userInfo').id
				this.$http2.post('ticketSystem/ticket/list', this.params).then(res => {
					if (res.code === 10000) {
						this.ticketLength = res.data.total
						// this.ticketLength = res.data.list.filter(item => this.ticketStatus.includes(item.工单状态))
						// 	.length
					}
				})
			},

			getTaskStatic() {
				this.params1.执行人id = uni.getStorageSync('userInfo').id
				let p1 = new Promise((resolve, reject) => {
					let params = {
						...this.params1
					}
					params.任务状态 = 1
					this.$http.post('taskSystem/task/list', params).then(res => {
						if (res.code === 10000) {
							resolve(res.data.total)
						}
					})
				})
				let p2 = new Promise((resolve, reject) => {
					let params = {
						...this.params1
					}
					params.任务状态 = 2
					this.$http.post('taskSystem/task/list', params).then(res => {
						if (res.code === 10000) {
							resolve(res.data.total)
						}
					})
				})
				let p3 = new Promise((resolve, reject) => {
					let params = {
						...this.params1
					}
					params.任务状态 = 3
					this.$http.post('taskSystem/task/list', params).then(res => {
						if (res.code === 10000) {
							resolve(res.data.total)
						}
					})
				})
				Promise.all([p1, p2, p3]).then(res => {
					// console.log('total', res)
					this.taskLength = res[0] + res[1] + res[2]
				})
				// this.params1.执行人id = uni.getStorageSync('userInfo').id
				// this.$http2.post('taskSystem/task/list', this.params1).then(res => {
				// 	if (res.code === 10000) {
				// 		res.data.list = res.data.list || []
				// 		this.taskLength = res.data.list.filter(item => this.taskStatus.includes(item.任务状态)).length
				// 	}
				// })
			},
			getProjectList(ids) {
				return new Promise((resolve, reject) => {
					this.$http2.post('/sys/project/list', {
						ids
					}).then(res => {
						console.log(res)
						if (res.code === 10000) {
							// console.log(res, '项目列表')
							res.data.list = res.data.list || []
							res.data.list.forEach(item => {
								item.value = item.id,
								item.label = item.name
							})
							resolve(res.data.list)
						}
					})
				})
			},
			showModal() {
				uni.showModal({
					title: '提示',
					content: '您还没有登录,请登录后使用',
					success: function(res) {
						if (res.confirm) {
							uni.navigateTo({
								url: '/ticketSystem/verify/verify'
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			navItemClick(url) {
				if (!uni.getStorageSync('login')) {
					this.showModal()
				} else {
					uni.navigateTo({
						url
					})
				}
			}
		}
	}
</script>
<style lang="scss">
	.index-top {
		width: 750rpx;
		height: 270rpx;
		text-align: center;
		color: #fff;
		border-bottom: 18rpx solid #f5f5f5;
		position: relative;

		image {
			width: 750rpx;
			height: 270rpx;
		}

		.top-text {
			position: absolute;
			left: 270rpx;
			top: 30rpx;
		}

		// background: #1152FC;
		// background: linear-gradient(to right, #3350D9, #1152FC);

		.index-box {
			position: absolute;
			bottom: 10rpx;
			margin-top: 32rpx;
			display: flex;
			justify-content: center;

			.index-num-item {
				// margin-right: 10rpx;
				padding-top: 20rpx;
				width: 250rpx;
				height: 161rpx;

				// background: rgba($color: #fff, $alpha: 0.15);
				// border-radius: 33rpx;
				.index-num {
					font-size: 60rpx;
				}

				text {
					opacity: 0.75;
				}
			}
		}
	}

	.nav {
		width: 750rpx;
		height: 346rpx;
		padding-bottom: 40rpx;
		display: flex;
		flex-wrap: wrap;
		// border-bottom: 2rpx solid #f5f5f5;

		// background-color: pink;
		.nav-item {
			width: 187.5rpx;
			height: 160rpx;

			.item-img {
				width: 80rpx;
				height: 80rpx;
				margin: 23rpx 0 10rpx 56rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.item-text {
				margin-left: 36rpx;
				font-size: 30rpx;
			}
		}
	}

	.notice {
		height: 42rpx;
		margin-top: 28rpx;
		margin-left: 20rpx;
		padding-left: 11rpx;
		line-height: 42rpx;
		border-left: 8rpx solid #1064E9;
		;
		margin-bottom: 30rpx;

		.title {
			font-size: 36rpx;
			margin-right: 419rpx;
		}

		.more {
			color: #1064E9;
			font-size: 28rpx;
		}
	}

	.notice-item {
		width: 670rpx;
		height: 134rpx;
		margin-left: 40rpx;
		position: relative;
		padding-left: 20rpx;
		margin-bottom: 14rpx;
		border-bottom: 2rpx solid #ECECEC;

		&::before {
			content: '';
			position: absolute;
			width: 16rpx;
			height: 16rpx;
			border-radius: 50%;
			background-color: #5472FF;
			left: -8rpx;
			top: 0;
		}

		.item-content {
			color: #333;
			font-size: 26rpx;
			margin-bottom: 10rpx;

			.item-more {
				margin-left: 4rpx;
				color: #666;
			}
		}

		.time {
			color: #999;
			font-size: 24rpx;
		}
	}
</style>
